<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
         .header, .footer {
             height: 30px;
             line-height: 30px;
             text-align: center;
             color: #fff;
             background-color: #aaa;
         }

         .container {
             text-align: center;
             color: #FFFFFF;
         }

         .subMainBox {
             float: left;
             width: 20%;
             background-color: #666;
         }

         .mainBox {
             float: left;
             width: 58%;
             margin: 0 1%;
             background-color: #000;
         }

         .sideBox {
             float: left;
             width: 20%;
             background-color: #666;
         }

         .footer {
             clear: both;
         }

        </style>
    </head>
    <body>
        <div class="header">头部信息</div>
        <div class="container">
            <div class="subMainBox">次要内容区域</div>
            <div class="mainBox">主要内容区域</div>
            <div class="sideBox">侧边栏</div>
        </div>
        <div class="footer">底部信息</div>
    </body>
</html>
